const React = require('react');
const ReactDOM = require('react-dom');
const Component = React.Component;
const Tile = require("./Tile");
const Spin = require("Spin");
const WaterSpin = Spin.WaterSpin;
const SVGSpin = Spin.SVGSpin;
const CssSpin = Spin.CssSpin;
const GIFSpin = Spin.GIFSpin;
const Button = require("Button");
const Switch = require("Switch");
const FontIcon = require("FontIcon");

class Page extends Component{
    componentDidMount (){
        for(let i in this.refs){
            let ref = this.refs[i];
            let block = ReactDOM.findDOMNode(ref);
            SyntaxHighlighter.highlight({}, block);
        }
    }

    plus(){
        let percent = this.refs.waterSpin.getPercent();
        if(percent < 100) {
            this.refs.waterSpin.setPercent(percent + 10);
        }
    }

    substract(){
        let percent = this.refs.waterSpin.getPercent();
        if(percent > 0) {
            this.refs.waterSpin.setPercent(percent - 10);
        }
    }

    switchSpin(value){
        if(value){
            this.refs.svg_spin.show();
        }else{
            this.refs.svg_spin.hide();
        }
    }

    render() {
        return (
            <div className="container">
                <div style={{background: "#1d1f20"}}>
                    <WaterSpin ref="waterSpin" percent="50"></WaterSpin>
                    <Button theme="primary" onClick={this.plus.bind(this)}>+</Button>
                    <Button theme="primary" onClick={this.substract.bind(this)}>-</Button>

                    <WaterSpin size={150} percent="50"></WaterSpin>
                </div>


                <SVGSpin ref="svg_spin" className="mt-20">
                    <div style={{height: 100, position: "relative", backgroundColor: "#ecf6fd", border: "1px solid #d2eafb"}}>
                        <strong>Alert message title</strong>
                        <p>Further details about the context of this alert.</p>
                    </div>
                </SVGSpin>

                <Switch className="mt-20" theme="primary" value="0" onChange={this.switchSpin.bind(this)}></Switch>



                <CssSpin className="mt-20" spinning={true} type="mask">
                    <div style={{height: 100, position: "relative", backgroundColor: "#ecf6fd", border: "1px solid #d2eafb"}}>
                        <strong>Alert message title</strong>
                        <p>Further details about the context of this alert.</p>
                    </div>
                </CssSpin>


                <CssSpin className="mt-20" spinning={true} type="waves">
                    <div style={{height: 100, position: "relative", backgroundColor: "#ecf6fd", border: "1px solid #d2eafb"}}>
                        <strong>Alert message title</strong>
                        <p>Further details about the context of this alert.</p>
                    </div>
                </CssSpin>

                <GIFSpin className="mt-20" spinning={true} src={"../../../assets/imgs/loading-icon.gif"}>
                    <div style={{height: 100, position: "relative", backgroundColor: "#ecf6fd", border: "1px solid #d2eafb"}}>
                        <strong>Alert message title</strong>
                        <p>Further details about the context of this alert.</p>
                    </div>
                </GIFSpin>
            </div>
        )
    }
}

module.exports = Page;
